<template>
  <div class="app-container">
    <el-container>
      <el-header><el-button type="danger" size="medium" @click="isShow('add')">新增</el-button></el-header>
      <el-main>  <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="templateType"
          label="模板类型"
          width="180"
          :formatter="templateTypeformatter"
        />
        <el-table-column
          prop="transportType"
          label="运送类型"
          width="180"
          :formatter="transportTypeformatter"
        />
        <el-table-column
          prop="associatedCityList"
          label="关联城市"
          :formatter="cityformatter"
        />
        <el-table-column
          prop="firstWeight"
          label="首重"
        />
        <el-table-column
          prop="continuousWeight"
          label="续重"
        />
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              size="mini"
              class="editbutton"
              :underline="false"
              @click="isShow('edit',scope.row)"
            >编辑</el-link>
            <span class="line"> | </span>
            <el-link
              size="mini"
              type="danger"
              class="delbutton"
              :underline="false"
              @click="handleDelete( scope.row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      </el-main>
    </el-container>
    <el-dialog :title="title" :visible="dialogFormVisible" @close="fnclose">
      <el-form ref="formDom" :model="formData" :rules="rules">
        <el-form-item label="模板类型" :label-width="formLabelWidth" prop="templateType">
          <el-select v-model="formData.templateType" placeholder="请选择活动区域" @change="templateTypeChange">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运行类型" :label-width="formLabelWidth" prop="transportType">
          <el-select v-model="formData.transportType" placeholder="请选择活动区域">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" :label-width="formLabelWidth" prop="associatedCityList">
          <span v-if="formData.templateType != 3">全国</span>
          <el-checkbox-group v-else v-model="formData.associatedCityList">
            <el-checkbox label="2">京津冀</el-checkbox>
            <el-checkbox label="3">江浙沪</el-checkbox>
            <el-checkbox label="4">川渝</el-checkbox>
            <el-checkbox label="5">黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="首重价格" :label-width="formLabelWidth" prop="firstWeight">
          <el-input v-model.number="formData.firstWeight" /><span class="unit">元</span>
        </el-form-item>
        <el-form-item label="续重价格" :label-width="formLabelWidth" prop="continuousWeight">
          <el-input v-model.number="formData.continuousWeight" /><span class="unit"> 元</span>
        </el-form-item>
        <el-form-item label="轻抛系数" :label-width="formLabelWidth" prop="lightThrowingCoefficient">
          <el-input v-model.number="formData.lightThrowingCoefficient" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">确 定</el-button>
        <el-button @click="fnclose">取 消</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import { transInfo, delTransport, addTrans } from '@/api/base'
import _ from 'lodash'
export default {
  name: 'Transit',
  data() {
    return {
      tableData: [],
      // 控制弹框是否显示
      dialogFormVisible: false,
      // 控制输入框的宽度
      formLabelWidth: '120px',
      // 新增表单数据
      formData: {
        associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        templateType: null,
        transportType: null,
        lightThrowingCoefficient: null

      },
      title: '',
      rules: {
        associatedCityList: [{ required: true, message: '选择不能为空', trigger: 'change' }],
        firstWeight: [{ required: true, message: '首重系数不能为为空', trigger: 'blur' }],
        continuousWeight: [{ required: true, message: '续重系数不能为为空', trigger: 'blur' }],
        templateType: [{ required: true, message: '模板类型不能为为空', trigger: 'blur' }],
        transportType: [{ required: true, message: '运送类型不能为为空', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为为空', trigger: 'blur' }]
      },
      // 点击取消还原数据
      initData: {}
    }
  },
  created() {
    this.getTransInfo()
  },
  methods: {
    // 点击删除
    async handleDelete(row) {
      const res = await delTransport(row.id)
      console.log(res)
      this.$message.success('删除成功')
      this.getTransInfo()
    },
    // 显示增加弹框
    isShow(type, row) {
      this.dialogFormVisible = true
      this.initData = row
      if (type === 'add') {
        this.title = '新增模板'
        this.formData = {
          associatedCityList: [],
          firstWeight: null,
          continuousWeight: null,
          templateType: null,
          transportType: null,
          lightThrowingCoefficient: null
        }
      } else if (type === 'edit') {
        this.title = '编辑模板'
        this.formData = _.cloneDeep(row)
      }
    },
    // 获取运费信息
    async getTransInfo() {
      const res = await transInfo()
      // console.log(res)
      this.tableData = res
    },
    // 格式化模板类型
    templateTypeformatter(row) {
      if (row.templateType === 1) {
        return '同城寄'
      } else if (row.templateType === 2) {
        return '省外寄'
      } else if (row.templateType === 3) {
        return '经济区互寄'
      } else if (row.templateType === 4) {
        return '跨省'
      }
    },
    // 格式化运送类型
    transportTypeformatter(row) {
      if (row.transportType === 1) {
        return '普快'
      } else {
        return '特快'
      }
    },
    // 格式化关联城市
    cityformatter(row) {
      const newArr = row.associatedCityList.map(item => {
        if (item === '1') {
          return '全国'
        } else if (item === '2') {
          return '京津冀'
        } else if (item === '3') {
          return '江浙沪'
        } else if (item === '4') {
          return '川渝'
        } else if (item === '5') {
          return '黑吉辽'
        }
      })
      return newArr.join(',')
    },
    // 运费管理添加
    async add() {
      if (this.title === '新增模板') {
        const res = await addTrans(this.formData)
        console.log(res)
        this.dialogFormVisible = false
        this.$message.success('新增成功')
      } else if (this.title === '编辑模板') {
        const res = await addTrans(this.formData)
        console.log(res)
        this.dialogFormVisible = false
        this.$message.success('修改成功')
      }

      this.$refs.formDom.resetFields()
      this.getTransInfo()
    },
    // 处理关联城市逻辑
    templateTypeChange() {
      if (this.formData.templateType !== 3) {
        this.formData.associatedCityList = ['1']
        return
      }
      if (this.formData.associatedCityList.length !== 0) {
        this.formData.associatedCityList = []
        return
      }
    },
    // 关闭弹框
    fnclose() {
      if (this.title === '编辑模板') {
        this.formData = this.initData
      }
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  background-color: #fff;
}
.el-header {
  display: flex;
  align-items: center;
}
.el-button {
  width: 100px;

}
.editbutton {
  color: #419eff;
  padding-right: 10px;
}
.delbutton {
  padding-left: 10px;
}
.line {
  color:#dcdfe6;
}
::v-deep .el-dialog {
  width: 600px;
}
 .dialog-footer {
  text-align: center;
}
::v-deep .el-input__prefix {
  right: 0;
  color: black;
}
.el-form {
  padding-right: 40px;
}
::v-deep .el-input__inner {
  width: 400px;
}
.unit {
  position: absolute;
  right:15px
}
</style>>

